<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通过babel实现浏览器兼容支持</title>
</head>
<body>
  <h3>通过babel实现浏览器兼容支持</h3>

  <div>
    很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。
  </div>

  babel-loader进行转码
  npm install -D babel-loader @babel/core @babel/preset-env
  npm install -D @babel/plugin-transform-runtime
  
  <p>babel-polyfill收尾</p>
  babel-loader并不能完成所有es6的解码，此时报错信息提示Symbol未定义，详情可参考【解决】IE浏览器提示SCRIPT5009 “Symbol”未定义。
  npm install --save babel-polyfill

  在index.js首行添加 import 'babel-polyfill';然后执行打包命令。至此，IE浏览器已经不会提示任何错误了。
</body>
</html>